<template>
  <section id="about" class="py-20 about_bg text-white opacity-0 transition-opacity duration-1000" ref="aboutSection">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-16 translate-y-8 opacity-0 transition-all duration-700 delay-300">关于我</h2>
      
      <transition-group name="card" tag="div" class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
        <!-- 职业愿景卡片 -->
        <div class="bg-white/20 backdrop-blur-sm p-6 rounded-xl text-center shadow-lg transform translate-y-10 opacity-0 transition-all duration-700 hover:scale-105" style="transition-delay: 100ms">
          <div class="w-16 h-16 bg-white/30 rounded-full flex items-center justify-center mx-auto mb-4 transform transition-transform duration-500 hover:rotate-12">
            <img src="@/assets/svg/vision-icon.svg" class="w-8 h-8 text-white" alt="职业愿景图标">
          </div>
          <h3 class="text-xl font-semibold mb-2 transform translate-y-4 opacity-0 transition-all duration-500 delay-200">职业愿景</h3>
          <p class="text-white/90 transform translate-y-4 opacity-0 transition-all duration-500 delay-300">成为连接技术与业务的桥梁，通过创新解决方案推动企业数字化转型</p>
        </div>

        <!-- 专业特长卡片 -->
        <div class="bg-white/20 backdrop-blur-sm p-6 rounded-xl text-center shadow-lg transform translate-y-10 opacity-0 transition-all duration-700 hover:scale-105" style="transition-delay: 300ms">
          <div class="w-16 h-16 bg-white/30 rounded-full flex items-center justify-center mx-auto mb-4 transform transition-transform duration-500 hover:rotate-12">
            <img src="@/assets/svg/expertise-icon.svg" class="w-8 h-8 text-white" alt="专业特长图标">
          </div>
          <h3 class="text-xl font-semibold mb-2 transform translate-y-4 opacity-0 transition-all duration-500 delay-200">专业特长</h3>
          <p class="text-white/90 transform translate-y-4 opacity-0 transition-all duration-500 delay-300">全栈开发技术栈整合，前端架构设计与性能优化，后端服务架构搭建</p>
        </div>

        <!-- 团队协作卡片 -->
        <div class="bg-white/20 backdrop-blur-sm p-6 rounded-xl text-center shadow-lg transform translate-y-10 opacity-0 transition-all duration-700 hover:scale-105" style="transition-delay: 500ms">
          <div class="w-16 h-16 bg-white/30 rounded-full flex items-center justify-center mx-auto mb-4 transform transition-transform duration-500 hover:rotate-12">
            <img src="@/assets/svg/teamwork-icon.svg" class="w-8 h-8 text-white" alt="团队协作图标">
          </div>
          <h3 class="text-xl font-semibold mb-2 transform translate-y-4 opacity-0 transition-all duration-500 delay-200">团队协作</h3>
          <p class="text-white/90 transform translate-y-4 opacity-0 transition-all duration-500 delay-300">敏捷开发流程实践，跨部门沟通协调，技术团队能力培养与知识分享</p>
        </div>
      </transition-group>

      <div class="max-w-3xl mx-auto text-center">
        <p class="text-white/90 mb-6 transform translate-y-8 opacity-0 transition-all duration-700 delay-700">我是一名拥有5年经验的全栈开发工程师，专注于为企业提供高质量的Web解决方案。曾为多家知名企业开发过核心业务系统，获得客户一致好评。</p>
        <div class="flex justify-center space-x-4">
          <button class="bg-white/20 hover:bg-white/30 text-white font-bold py-2 px-6 rounded transition duration-300 backdrop-blur-sm transform hover:scale-105 active:scale-95">
            下载简历
          </button>
          <button class="bg-transparent border-2 border-white/50 text-white hover:bg-white/10 font-bold py-2 px-6 rounded transition duration-300 backdrop-blur-sm transform hover:scale-105 active:scale-95">
            了解更多
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const aboutSection = ref(null);

onMounted(() => {
  // 页面加载时显示section
  setTimeout(() => {
    aboutSection.value.style.opacity = '1';
  }, 100);

  // 检测元素是否在视口中
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 显示所有卡片内元素
        const cards = entry.target.querySelectorAll('.grid > div');
        cards.forEach(card => {
          card.style.transform = 'translateY(0)';
          card.style.opacity = '1';
          // 显示卡片内的标题和文本
          const title = card.querySelector('h3');
          const text = card.querySelector('p');
          if (title) title.style.transform = 'translateY(0)';
          if (title) title.style.opacity = '1';
          if (text) text.style.transform = 'translateY(0)';
          if (text) text.style.opacity = '1';
        });

        // 显示标题和底部文本
        const title = entry.target.querySelector('h2');
        const bottomText = entry.target.querySelector('.max-w-3xl p');
        if (title) title.style.transform = 'translateY(0)';
        if (title) title.style.opacity = '1';
        if (bottomText) bottomText.style.transform = 'translateY(0)';
        if (bottomText) bottomText.style.opacity = '1';
      }
    });
  }, { threshold: 0.1 });

  if (aboutSection.value) {
    observer.observe(aboutSection.value);
  }
});
</script>

<style lang="scss">
.about_bg {
  background-image: url('@/assets/bg/about_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>